<!--
    Created by IntelliJ IDEA.
    User: Dai
    Date: 2018/4/07
    Time: 13:14
    Remark: 平台总览页面
    To change this template use File | Settings | File Templates.
-->
<!DOCTYPE html>
<html layout:decorate="~{default/layout}" xmlns:layout="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>平台总览</title>
    <style>
        .container-fluid .col-xs-3 {
            padding: 0;
        }

        .container-fluid div span {
            padding: 0;
        }
        .infoBox {
            border: 1px solid #5daff7;
            border-radius: 5px;
        }
        .infoBox img{
            max-height: 10px;
        }
        .infoBox .title{
            background-color: #5daff7;
            padding: 2px 5px;
        }
        .infoBox .list{
            font-size: 14px;
            padding: 10px;
            background-color: white;
            height: 169px;
            border-radius: 5px;
        }
        .infoBox .list label{
           width: 100px;
        }

    </style>
    <!--echarts-->
    <script src="/js/echarts.min.js"></script>
    <script src="/js/dark.js"></script>
    <script>
        /**
         * 图表
         */
        $(function () {
            /**
             * 平台规模 中 的饼状图
             */
            var platform_scale = echarts.init(document.getElementById('platform_scale'), 'dark');
            platform_scale.setOption({
                grid: {                 // 设置边距
                    left: '5%',
                    right: '5%',
                    containLabel: true  // 是否包含显示的刻度
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                series: [
                    {
                        name: '平台规模',
                        type: 'pie',
                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        data: []
                    },
                ]
            });
            platform_scale.showLoading();
            $.get("/overview/platform_scale", function (callback) {
                platform_scale.hideLoading();
                // 填入数据
                platform_scale.setOption({
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '平台规模',
                        data: callback
                    }]
                });
            })
            /**
             * 地图下面的 转移电量曲线
             */
            var transfer_power = echarts.init(document.getElementById('transfer_power'), 'dark');
            transfer_power.setOption({
                title: {
                    text: '转移电量曲线',
                    x: 'center',
                    y: '3%'
                },
                grid: {                 // 设置边距
                    left: '0%',
                    right: '5%',
                    bottom: '0%',
                    containLabel: true  // 是否包含显示的刻度
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        animation: false
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: false
                    },
                    data: ['周一','周二','周三','周四','周五','周六','周日']
                },
                yAxis: {
                    name: '电量  \n(MWh)',
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    name: '模拟数据',
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    data: [111,222,333,22,11,33]
                }]
            })
        });
    </script>
    <!--百度地图-->
    <script src="http://api.map.baidu.com/api?v=3.0&ak=nbnttGGI6lilllgy2znNZGif3H7HxI2W"></script>
    <script src="/js/InfoBox_min.js"></script>
    <script>
        $(function () {
            // 创建地图实例
            var map = new BMap.Map("map", {
                minZoom: 4,
                maxZoom: 18,
                enableMapClick: false,
            });
            // 初始化地图，设置中心点坐标和地图级别
            var point = new BMap.Point(121.454758, 31.230757);
            map.centerAndZoom(point, 15);
            map.enableScrollWheelZoom(true);
            //添加信息化窗口
            addMarker(map, point);
            // 添加控件 - 还原位置
            addControl(map, point);
        });

        /**
         * 添加信息化窗口
         */
        function addMarker(map, point) {
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);               // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳起来吧♪(^∇^*) 我的小啾啾~
            var html = ["<div class='infoBoxContent'>",
                "<div class='title'><strong>大拇指大厦</strong>&nbsp;<a href='/monitor/monitor?id=1'>&gt;&gt;</a></div>",
                "<div class='list'>",
                "<div><label>总存储能量</label><span>1111</span><span>&nbsp;&nbsp;Kwh</span></div>",
                "<div><label>安全运行天数</label><span>1111</span><span>&nbsp;&nbsp;天</span></div>",
                "<div><label>总电量</label><span>1111</span><span>&nbsp;&nbsp;Ah</span></div>",
                "<div><label>故障数</label><span>2</span></div>",
                "<div><label>联系人</label><span>张经理</span></div>",
                "<div><label>联系方式</label><span>13721314123</span></div>",
                "</div>",
                "</div>"];
            var infoBox = new BMapLib.InfoBox(map, html.join(""), {
                boxStyle: {
                    width: "270px",
                    height: "205px"
                },
                closeIconUrl : "/image/close.png",
                closeIconMargin: "10px",
                align: INFOBOX_AT_TOP
            });
            infoBox.open(marker);
        }

        /**
         * 添加控件 - 还原位置
         */
        function addControl(map, point) {
            // 定义一个控件类,即function
            function ZoomControl() {
                // 默认停靠位置和偏移量
                this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
                this.defaultOffset = new BMap.Size(10, 10);
            }

            // 通过JavaScript的prototype属性继承于BMap.Control
            ZoomControl.prototype = new BMap.Control();
            // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
            // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
            ZoomControl.prototype.initialize = function (map) {
                // 创建一个DOM元素
                var div = document.createElement("div");
                // 添加文字说明
                div.appendChild(document.createTextNode("回到原点"));
                // 设置样式
                div.style.cursor = "pointer";
                div.style.color = "blue";
                div.style.border = "2px solid blue";
                div.style.borderRadius = "5px";
                div.style.backgroundColor = "white";
                div.style.padding = "5px";
                // 绑定事件,点击一次放大两级
                div.onclick = function (e) {
                    map.centerAndZoom(point, 15);
                }
                // 添加DOM元素到地图中
                map.getContainer().appendChild(div);
                // 将DOM元素返回
                return div;
            }
            // 创建控件
            var myZoomCtrl = new ZoomControl();
            // 添加到地图当中
            map.addControl(myZoomCtrl);
        }
    </script>
</head>
<body>
<div layout:fragment="content">
    <div class="main-content-inner">
        <div class="page-content container-fluid" style="background-color: black; color: white; font-size: 20px">
            <h1 style="width: 100%; text-align: center">XX储能平台</h1>
            <div class="col-xs-3" style="width: 20%">
                <!--平台规模-->
                <div style="border: 1px solid white; height: 490px">
                    <h2 style="width: 100%; text-align: center">平台规模</h2>
                    <div class="col-sm-12">
                        <span class="col-sm-8">总用户数</span>
                        <span class="col-sm-2" th:text="${total_users}"></span>
                        个
                    </div>
                    <!--饼状图-->
                    <div id="platform_scale" style="height: 390px;"></div>
                </div>
                <!--平台性能-->
                <div style="border: 1px solid white; height: 300px; margin-top: 15px">
                    <h2 style="width: 100%; text-align: center">平台性能</h2>
                    <!--平均充放电效率-->
                    <div class="col-sm-12" style="margin-top: 10px">
                        <span class="col-sm-8">平均充放电效率</span>
                        <span class="col-sm-2" th:text="${average_charge_discharge}"></span>
                        %
                    </div>
                    <!--系统安全稳定运行-->
                    <div class="col-sm-12" style="margin-top: 10px">
                        <span class="col-sm-8">系统安全稳定运行</span>
                        <span class="col-sm-2" th:text="${safe_operation_days}"></span>
                        天
                    </div>
                </div>
            </div>
            <div class="col-xs-6" style="width: 60%">
                <!--地图信息-->
                <div style="height: 490px" id="map"></div>
                <!--转移电量曲线-->
                <div style="height: 300px; margin-top: 15px" id="transfer_power"></div>
            </div>
            <!--平台效益-->
            <div class="col-xs-3" style="border: 1px solid white; height: 805px; width: 20%">
                <h2 style="width: 100%; text-align: center">平台效益</h2>
                <!--TODO ε=(´ο｀*)))唉 不想写假数据了 以后再说 先用总用户数凑凑-->
                <!--累计节省电量-->
                <div class="col-sm-12">
                    <p>累计节省电量</p>
                    <span class="col-sm-2" th:text="${total_users}"></span>
                    MWh
                </div>
                <div class="col-sm-12">&nbsp;</div>
                <!--累计再利用退役电池-->
                <div class="col-sm-12">
                    <p>累计再利用退役电池</p>
                    <span class="col-sm-2" th:text="${total_users}"></span>
                    T
                </div>
                <div class="col-sm-12">&nbsp;</div>
                <!--用户平均电费降比率/收益率-->
                <div class="col-sm-12">
                    <p>用户平均电费降比率/收益率</p>
                    <span class="col-sm-2" th:text="${total_users}"></span>
                    %
                </div>
                <div class="col-sm-12">&nbsp;</div>
                <!--减少C排放-->
                <div class="col-sm-12">
                    <p>减少C排放</p>
                    <span class="col-sm-2" th:text="${total_users}"></span>
                    t
                </div>
                <!--减少CO2排放-->
                <div class="col-sm-12">
                    <p>减少CO2排放</p>
                    <span class="col-sm-2" th:text="${total_users}"></span>
                    t
                </div>
                <!--等效种植树木-->
                <div class="col-sm-12">
                    <p>等效种植树木</p>
                    <span class="col-sm-2" th:text="${total_users}"></span>
                    颗
                </div>
                <!--节约标准煤-->
                <div class="col-sm-12">
                    <p>节约标准煤</p>
                    <span class="col-sm-2" style="float: right">&nbsp;t</span>
                    <span style="float: right" th:text="${total_users}"></span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>